<style type="text/css">
.topTitle{
background-color: yellow;
width: 300px;
height: 30px;
}
.topTitle ul{
list-style-type: none;
margin-left: -50px;
}
.topTitle ul li{
float: left;
line-height: 30px;
cursor: pointer;
margin-left: 30px;
width: 40px;
padding-left:20px;
text-align: center;
}
.content{
width: 300px;
height: 300px;
background-color: fuchsia;
}
.content div{
display: none;
}
.content .nowShow{
display: block;
}
</style>
</head>
<body>
<div class="topTitle">
<ul>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
</div>
<div class="content">
<div class="nowShow">标题1</div>
<div>标题2</div>
<div>标题3</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".topTitle ul li").mouseover(function() {
var dd = $(".content>div").eq($(".topTitle ul li").index(this));
dd.addClass("nowShow");
dd.siblings().removeClass("nowShow");//siblings()遍历
});
});
</script>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
